<template>
  <div ref="chart" style="width:67.7083vw; height: 558px"></div>
</template>

<script>
export default {
  props: {
    themeClass: {
      type: String
    },
    dataArr: {
      type: Array
    }
  },
  data () {
    return {
      myChart: null,
      source: [],
      colors: ''
      // chartStyle: {
      //   width: "700px",
      //   height: "300px",
      // },
    }
  },
  watch: {
    themeClass () {
      this.Charts()
    },
    dataArr (n) {
      const arr = ['product', '四级响应', '三级响应', '二级响应', '一级响应']
      this.source = [...[arr], ...n]
      this.Charts()
    }
  },
  computed: {
    getbar () {
      const _this = this
      // console.log(_this.themeClass, 999999)
      if (_this.themeClass === 'theme-light') {
        _this.colors = '#415963'
      } else if (_this.themeClass === 'theme-dark') {
        _this.colors = '#fff'
      }
      const option = {
        title: {
          text: _this.title,
          left: 'left',
          top: 0,
          textStyle: {
            color: _this.colors
          }
          // subtext: _this.title,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          }
        },
        legend: {
          top: 30,
          right: 0,
          textStyle: {
            color: _this.colors
          },
          itemWidth: 4
          // itemHeight:10
          // width:20,
          // height:20
          // data: _this.legend,
        },
        grid: {
          left: '10%',
          right: '4%',
          top: '30%',
          containLabel: false
        },
        dataset: {
          source: _this.source
        },
        xAxis: {
          type: 'category', // 还有其他的type
          name: '年份',
          nameTextStyle: {
            color: _this.colors
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: new _this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [
                {
                  offset: 0,
                  color: '#00C0FA'
                },
                {
                  offset: 1,
                  color: '#025EEA'
                }
              ])
            }
          },
          offset: 10,
          axisTick: {
            show: false,
            alignWithLabel: false
          },
          axisLabel: {
            fontSize: 12,
            color: _this.colors
          },
          splitLine: {
            show: false
          }
          // boundaryGap: false,
        },
        // dataZoom: [
        //   {
        //     type: "slider",
        //     show: true,
        //     xAxisIndex: [0],
        //     left: "9%",
        //     bottom: -5,
        //     start: 10,
        //     end: 90, //初始化滚动条
        //   },
        // ],
        yAxis: {
          type: 'value',
          name: '次数',
          nameTextStyle: {
            color: _this.colors
          },
          axisLabel: {
            color: _this.colors
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#0377C3'
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#00C0FA'
            }
          }
        },
        label: {},
        series: [
          {
            type: 'bar',
            barWidth: '10%',
            barGap: '0.5',
            itemStyle: {
              color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0,
                  color: '#00BFF9' },
                { offset: 1,
                  color: '#015EE9' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '10%',
            barGap: '0.5',
            itemStyle: {
              color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0,
                  color: '#FFF26B' },
                { offset: 1,
                  color: '#E9C601' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '10%',
            barGap: '0.5',
            itemStyle: {
              color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0,
                  color: '#FFBE6B' },
                { offset: 1,
                  color: '#E98401' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '10%',
            barGap: '0.5',
            itemStyle: {
              color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0,
                  color: '#FF6B6B' },
                { offset: 1,
                  color: '#E90121' }
              ])
            }
          }
        ]
      }
      return option
    }
  },
  methods: {
    __resizeHandler () {
      this.myChart.resize()
    },
    Charts () {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(this.$refs.chart)
      this.myChart.setOption(this.getbar)
      window.addEventListener('resize', this.__resizeHandler, true)
    }
  },
  destroyed () {
    window.removeEventListener('resize', this.__resizeHandler, true)
  },
  mounted () {}
  //   watch: {
  //     series(n) {
  //       this.Charts();
  //     },
  //   },
}
</script>
